<template>
  <div>
    <!-- 底部模块 -->
    <footer>
      <div class="foo_top">
        <div class="foo_head">
          <a>预约维修服务</a>
        </div>
        <div class="foo_head">
          <a>7天无理由退货</a>
        </div>
        <div class="foo_head">
          <a>15天免费换货</a>
        </div>
        <div class="foo_head">
          <a>满69元包邮</a>
        </div>
        <div class="foo_head">
          <a>520余家售后网点</a>
        </div>
      </div>
      <div class="foo_content">
        <div class="foo_tilte">
          <div class="modules">帮助中心</div>
          <ul>
            <li><a>账户管理</a></li>
            <li><a>购物指南</a></li>
            <li><a>订单操作</a></li>
          </ul>
        </div>
        <div class="foo_tilte">
          <div class="modules">服务支持</div>
          <ul>
            <li><a>售后政策</a></li>
            <li><a>自助服务</a></li>
            <li><a>相关下载</a></li>
          </ul>
        </div>
        <div class="foo_tilte">
          <div class="modules">线下门店</div>
          <ul>
            <li><a>小米之家</a></li>
            <li><a>服务网点</a></li>
            <li><a>授权体验店</a></li>
          </ul>
        </div>
        <div class="foo_tilte">
          <div class="modules">关于小米</div>
          <ul>
            <li><a>了解小米</a></li>
            <li><a>加入小米</a></li>
            <li><a>投资者关系</a></li>
            <li><a>企业社会责任</a></li>
            <li><a>廉洁举报</a></li>
          </ul>
        </div>
        <div class="foo_tilte">
          <div class="modules">关注我们</div>
          <ul>
            <li><a>新浪微博</a></li>
            <li><a>官方微信</a></li>
            <li><a>联系我们</a></li>
            <li><a>公益基金会</a></li>
          </ul>
        </div>
        <div class="foo_tilte">
          <div class="modules">特色服务</div>
          <ul>
            <li><a>F码通道</a></li>
            <li><a>礼物码</a></li>
            <li><a>防伪查询</a></li>
          </ul>
        </div>

        <div class="conUs">
          <h2>400-100-5678</h2>
          <p class="lx1">8:00-18:00 (仅收市话费)</p>
          <!-- <p class="lx1">(仅收市话费)</p> -->
          <div id="lx2">联系客服</div>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss">
footer {
  .foo_top {
    width: 80%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #999999;
    .foo_head {
      margin: 0 auto;
      padding: 20px;

      text-align: center;
      cursor: pointer;
      a {
        color: #666;
        font-size: 16px;
        padding-right: 60px;
        margin: 0 auto;
        border-right: 1px solid #999999;
      }
    }
    .foo_head a:hover {
      color: orangered;
    }
  }
  .foo_content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto;
  }

  .foo_tilte {
    height: 250px;
    .modules {
      // padding-top: 20px;
      margin-top: 30px;
      padding-bottom: 10px;
      font-size: 14px;
      font-family: "微软雅黑";
      color: #666;
    }
    li {
      line-height: 30px;
    }
    a {
      color: #666;
      font-size: 12px;
    }
    li a:hover {
      color: orangered;
    }
  }

  .conUs {
    width: 245px;
    border-left: 1px solid #999999;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    h2 {
      color: orangered;
    }
    .lx1 {
      font-family: "微软雅黑";
      font-size: 10px;
      color: #666;
    }

    #lx2 {
      border: 1px orangered solid;
      width: 100px;
      color: orangered;
      font-size: 10px;
      margin: 0 auto;
      padding: 4px;
      margin-top: 5px;
      transition: 0.35s ease;
    }
    #lx2:hover {
      color: white;
      background-color: orangered;
    }
  }
}
</style>